Bildschirmausrichtung meistern: Ein umfassender Leitfaden zur Handhabung von Gerätedrehungen

In der heutigen Welt der vielfältigen Geräte ist die elegante Handhabung der Bildschirmausrichtung entscheidend für eine positive Benutzererfahrung. Ob es sich um ein Smartphone, ein Tablet oder sogar ein faltbares Gerät handelt, Benutzer erwarten, dass sich Anwendungen nahtlos anpassen, wenn sie ihr Gerät drehen. Dieser Leitfaden bietet einen umfassenden Überblick über die Handhabung von Gerätedrehungen und behandelt verschiedene Plattformen und Techniken, um sicherzustellen, dass Ihre Anwendungen responsiv und benutzerfreundlich sind.

Grundlagen der Bildschirmausrichtung

Die Bildschirmausrichtung bezieht sich auf die Richtung, in der der Inhalt auf dem Bildschirm eines Geräts angezeigt wird. Die beiden Hauptausrichtungen sind:

• Hochformat (Portrait): Der Bildschirm ist höher als er breit ist. Dies ist die typische Ausrichtung für Smartphones.
• Querformat (Landscape): Der Bildschirm ist breiter als er hoch ist. Dies wird oft für die Wiedergabe von Videos oder das Spielen von Spielen bevorzugt.

Einige Geräte und Anwendungen unterstützen auch:

• Umgekehrtes Hochformat: Hochformat-Ausrichtung, bei der das Gerät um 180 Grad gedreht ist.
• Umgekehrtes Querformat: Querformat-Ausrichtung, bei der das Gerät um 180 Grad gedreht ist.

Warum sollte man Änderungen der Bildschirmausrichtung behandeln?

Das Versäumnis, Änderungen der Bildschirmausrichtung zu handhaben, kann zu einer Vielzahl von Problemen führen, darunter:

• Layout-Probleme: Elemente können falsch ausgerichtet, abgeschnitten oder überlappend sein.
• Datenverlust: In einigen Fällen kann der Status einer Aktivität oder Anwendung bei der Drehung des Bildschirms verloren gehen.
• Schlechte Benutzererfahrung: Eine abrupte oder fehlerhafte Erfahrung kann Benutzer frustrieren und den Ruf Ihrer Anwendung schädigen.
• Leistungsprobleme: Häufiges Neu-Rendern und Layout-Berechnungen können die Leistung beeinträchtigen, insbesondere auf älteren Geräten.

Handhabung der Bildschirmausrichtung auf verschiedenen Plattformen

Die spezifischen Techniken zur Handhabung der Bildschirmausrichtung variieren je nach der Plattform, für die Sie entwickeln. Betrachten wir einige der beliebtesten Plattformen:

1. Android

Android bietet mehrere Mechanismen zur Handhabung von Änderungen der Bildschirmausrichtung. Die gebräuchlichsten Ansätze umfassen:

a. Konfigurationsänderungen

Standardmäßig erstellt Android die Activity neu, wenn sich die Bildschirmausrichtung ändert. Das bedeutet, dass die `onCreate()`-Methode erneut aufgerufen und das gesamte Layout neu aufgebaut wird. Obwohl dies nützlich sein kann, um die Benutzeroberfläche basierend auf der Ausrichtung vollständig neu zu strukturieren, kann es auch ineffizient sein, wenn Sie das Layout nur geringfügig anpassen müssen.

Um zu verhindern, dass die Activity neu erstellt wird, können Sie in der Datei `AndroidManifest.xml` deklarieren, dass Ihre Activity die Konfigurationsänderung `orientation` selbst handhabt:

<activity
 android:name=".MyActivity"
 android:configChanges="orientation|screenSize"
 ... >
</activity>

Durch das Hinzufügen von `orientation` und `screenSize` (wichtig für API-Level 13 und höher) teilen Sie dem System mit, dass Ihre Activity Änderungen der Ausrichtung selbst handhaben wird. Wenn der Bildschirm gedreht wird, wird die `onConfigurationChanged()`-Methode aufgerufen.

@Override
public void onConfigurationChanged(Configuration newConfig) {
 super.onConfigurationChanged(newConfig);

 // Check the orientation of the screen
 if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
 Toast.makeText(this, "landscape", Toast.LENGTH_SHORT).show();
 } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
 Toast.makeText(this, "portrait", Toast.LENGTH_SHORT).show();
 }
}

Innerhalb von `onConfigurationChanged()` können Sie die Benutzeroberfläche basierend auf der neuen Ausrichtung aktualisieren. Dieser Ansatz ist effizienter als das Neuerstellen der Activity, da er unnötiges Laden von Ressourcen und Aufbauen des Layouts vermeidet.

b. Speichern und Wiederherstellen des Activity-Zustands

Selbst wenn Sie die Konfigurationsänderung selbst handhaben, müssen Sie möglicherweise den Zustand der Activity speichern und wiederherstellen. Wenn Ihre Activity beispielsweise ein Textfeld hat, möchten Sie den vom Benutzer eingegebenen Text beibehalten, wenn der Bildschirm gedreht wird.

Sie können die `onSaveInstanceState()`-Methode verwenden, um den Zustand der Activity zu speichern, und die `onRestoreInstanceState()`-Methode, um ihn wiederherzustellen.

@Override
public void onSaveInstanceState(Bundle savedInstanceState) {
 savedInstanceState.putString("my_text", myTextView.getText().toString());
 super.onSaveInstanceState(savedInstanceState);
}

@Override
public void onRestoreInstanceState(Bundle savedInstanceState) {
 super.onRestoreInstanceState(savedInstanceState);
 String myText = savedInstanceState.getString("my_text");
 myTextView.setText(myText);
}

Alternativ können Sie ViewModels mit SavedStateHandle verwenden, um UI-bezogene Daten über Konfigurationsänderungen hinweg zu verwalten und beizubehalten, ein modernerer und empfohlener Ansatz.

c. Alternative Layouts

Android ermöglicht es Ihnen, verschiedene Layout-Dateien für unterschiedliche Bildschirmausrichtungen bereitzustellen. Sie können separate Layout-Dateien in den Verzeichnissen `res/layout-land/` und `res/layout-port/` erstellen. Wenn der Bildschirm gedreht wird, lädt Android automatisch die entsprechende Layout-Datei.

Dieser Ansatz ist nützlich, wenn sich die Benutzeroberfläche im Quer- und Hochformat erheblich unterscheiden muss. Zum Beispiel möchten Sie möglicherweise ein zweispaltiges Layout im Querformat und ein einspaltiges Layout im Hochformat anzeigen.

d. Verwendung von ConstraintLayout

ConstraintLayout ist ein leistungsstarker Layout-Manager, mit dem Sie flexible und anpassungsfähige Layouts erstellen können. Mit ConstraintLayout können Sie Constraints definieren, die festlegen, wie Ansichten relativ zueinander und zum übergeordneten Layout positioniert werden sollen. Dies erleichtert die Erstellung von Layouts, die sich an unterschiedliche Bildschirmgrößen und -ausrichtungen anpassen.

2. iOS

iOS bietet ebenfalls Mechanismen zur Handhabung von Änderungen der Bildschirmausrichtung. Hier sind einige gängige Ansätze:

a. Auto Layout

Auto Layout ist ein constraint-basiertes Layout-System, mit dem Sie Regeln für die Positionierung und Größe von Ansichten definieren können. Auto Layout-Constraints stellen sicher, dass sich Ihre Benutzeroberfläche an unterschiedliche Bildschirmgrößen und -ausrichtungen anpasst.

Bei der Verwendung von Auto Layout definieren Sie typischerweise Constraints, die die Beziehungen zwischen Ansichten festlegen. Sie könnten beispielsweise einen Button so einschränken, dass er horizontal und vertikal in seiner übergeordneten Ansicht zentriert ist. Wenn der Bildschirm gedreht wird, berechnet die Auto Layout-Engine automatisch die Positionen und Größen der Ansichten neu, um die Constraints zu erfüllen.

b. Größenklassen (Size Classes)

Größenklassen sind eine Möglichkeit, Bildschirmgrößen und -ausrichtungen zu kategorisieren. iOS definiert zwei Größenklassen: `Compact` und `Regular`. Ein Gerät kann unterschiedliche Größenklassen für seine Breite und Höhe haben. Zum Beispiel hat ein iPhone im Hochformat eine `Compact`-Breiten- und eine `Regular`-Höhengrößenklasse. Im Querformat hat es oft eine `Compact`-Höhe und je nach Modell eine `Compact`- oder `Regular`-Breite.

Sie können Größenklassen verwenden, um Ihre Benutzeroberfläche basierend auf der Bildschirmgröße und -ausrichtung anzupassen. Zum Beispiel möchten Sie möglicherweise unterschiedliche Sätze von Ansichten anzeigen oder unterschiedliche Schriftarten für verschiedene Größenklassen verwenden.

Sie können unterschiedliche Constraints konfigurieren und sogar Ansichten basierend auf Größenklassen direkt im Interface Builder oder programmatisch installieren/deinstallieren.

c. Rotationsmethoden des View Controllers

iOS bietet mehrere Methoden in der UIViewController-Klasse, die aufgerufen werden, wenn sich das Gerät dreht:

• viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator): Wird aufgerufen, bevor die Ansicht des View Controllers für einen Übergang in der Größe geändert wird.
• viewWillLayoutSubviews(): Wird kurz bevor die Ansicht des View Controllers ihre Subviews anordnet, aufgerufen.
• viewDidLayoutSubviews(): Wird kurz nachdem die Ansicht des View Controllers ihre Subviews angeordnet hat, aufgerufen.

Sie können diese Methoden überschreiben, um benutzerdefinierte Layout-Anpassungen durchzuführen, wenn sich der Bildschirm dreht.

d. Notification Center

Sie können mit dem Notification Center auf Benachrichtigungen über Ausrichtungsänderungen lauschen:

NotificationCenter.default.addObserver(self, selector: #selector(orientationChanged), name: UIDevice.orientationDidChangeNotification, object: nil)

@objc func orientationChanged() {
 if UIDevice.current.orientation.isLandscape {
 print("Landscape")
 } else {
 print("Portrait")
 }
}

3. Webentwicklung (HTML, CSS, JavaScript)

In der Webentwicklung können Sie CSS Media Queries und JavaScript verwenden, um Änderungen der Bildschirmausrichtung zu handhaben.

a. CSS Media Queries

Media Queries ermöglichen es Ihnen, unterschiedliche Stile basierend auf Bildschirmgröße, Ausrichtung und anderen Merkmalen anzuwenden. Sie können das `orientation`-Medienmerkmal verwenden, um auf bestimmte Ausrichtungen abzuzielen.

/* Hochformat */
@media (orientation: portrait) {
 body {
 background-color: lightblue;
 }
}

/* Querformat */
@media (orientation: landscape) {
 body {
 background-color: lightgreen;
 }
}

Sie können Media Queries verwenden, um das Layout, Schriftarten und andere Stile basierend auf der Ausrichtung anzupassen.

b. JavaScript

Sie können JavaScript verwenden, um Änderungen der Bildschirmausrichtung zu erkennen und benutzerdefinierte Aktionen durchzuführen. Die `screen.orientation`-API liefert Informationen über die aktuelle Ausrichtung.

function handleOrientationChange() {
 if (screen.orientation.type === "landscape-primary" || screen.orientation.type === "landscape-secondary") {
 console.log("Landscape");
 } else if (screen.orientation.type === "portrait-primary" || screen.orientation.type === "portrait-secondary") {
 console.log("Portrait");
 } else {
 console.log("Unknown orientation");
 }
}

window.addEventListener("orientationchange", handleOrientationChange);

Alternativ können Sie die `matchMedia`-API mit Media Queries verwenden:

const landscapeMediaQuery = window.matchMedia("(orientation: landscape)");

function handleOrientationChange(event) {
 if (event.matches) {
 console.log("Landscape");
 } else {
 console.log("Portrait");
 }
}

landscapeMediaQuery.addEventListener("change", handleOrientationChange);

JavaScript kann verwendet werden, um das Layout dynamisch anzupassen, verschiedene Ressourcen zu laden oder andere Aktionen basierend auf der Ausrichtung durchzuführen.

c. Responsive Design Frameworks

Frameworks wie Bootstrap, Foundation und Materialize CSS bieten integrierte Unterstützung für responsives Design und erleichtern die Erstellung von Layouts, die sich an unterschiedliche Bildschirmgrößen und -ausrichtungen anpassen. Diese Frameworks verwenden typischerweise ein Grid-System und Media Queries, um flexible und responsive UIs zu erstellen.

Best Practices für die Handhabung der Bildschirmausrichtung

Hier sind einige Best Practices, die Sie bei der Handhabung von Änderungen der Bildschirmausrichtung beachten sollten:

• Vermeiden Sie unnötiges Neuerstellen von Activity/ViewController: Wenn möglich, handhaben Sie die Konfigurationsänderung selbst, um den Mehraufwand für das Neuerstellen der Activity oder des ViewControllers zu vermeiden.
• Zustand speichern und wiederherstellen: Speichern und wiederherstellen Sie immer den Zustand der Activity/des ViewControllers, um Datenverlust zu vermeiden. Verwenden Sie ViewModels für eine robustere Zustandsverwaltung.
• Verwenden Sie Auto Layout oder ConstraintLayout: Diese Layout-Systeme erleichtern die Erstellung flexibler und anpassungsfähiger Layouts.
• Auf mehreren Geräten testen: Testen Sie Ihre Anwendung auf einer Vielzahl von Geräten mit unterschiedlichen Bildschirmgrößen und -ausrichtungen, um sicherzustellen, dass sie korrekt funktioniert.
• Barrierefreiheit berücksichtigen: Stellen Sie sicher, dass Ihre Anwendung für Benutzer mit Behinderungen zugänglich bleibt, wenn sich der Bildschirm dreht.
• Klare visuelle Hinweise geben: Wenn sich die Benutzeroberfläche bei einer Drehung des Bildschirms erheblich ändert, geben Sie klare visuelle Hinweise, um den Benutzern die Änderungen verständlich zu machen.
• Vermeiden Sie das Erzwingen einer bestimmten Ausrichtung (es sei denn, es ist notwendig): Erlauben Sie den Benutzern, ihr Gerät wann immer möglich in ihrer bevorzugten Ausrichtung zu verwenden. Das Erzwingen einer Ausrichtung kann frustrierend und unbequem sein. Sperren Sie die Ausrichtung nur, wenn es für die Funktionalität der Anwendung entscheidend ist (z. B. ein Spiel, das den Querformatmodus erfordert). Wenn Sie die Ausrichtung sperren, kommunizieren Sie den Grund klar an den Benutzer.
• Für Leistung optimieren: Minimieren Sie den Arbeitsaufwand, der bei einer Bildschirmdrehung erforderlich ist, um Leistungsprobleme zu vermeiden.
• Relative Einheiten verwenden: Verwenden Sie bei der Definition von Größen und Positionen in Ihrem Layout relative Einheiten (z. B. Prozentsätze, `dp`, `sp`) anstelle von absoluten Einheiten (z. B. Pixel), um sicherzustellen, dass Ihre Benutzeroberfläche auf verschiedenen Bildschirmgrößen korrekt skaliert.
• Bestehende Bibliotheken und Frameworks nutzen: Nutzen Sie vorhandene Bibliotheken und Frameworks, die Unterstützung für responsives Design und die Handhabung der Bildschirmausrichtung bieten.

Ausrichtungssperre und Benutzererfahrung

Obwohl es im Allgemeinen am besten ist, den Benutzern das freie Drehen ihrer Geräte zu ermöglichen, gibt es Situationen, in denen Sie die Bildschirmausrichtung möglicherweise sperren möchten. Zum Beispiel könnte ein Vollbild-Videoplayer die Ausrichtung für eine optimale Anzeige auf den Querformatmodus sperren.

Es ist jedoch wichtig, die Ausrichtungssperre sparsam einzusetzen und dem Benutzer einen klaren Grund dafür zu geben. Das Erzwingen einer Ausrichtung kann frustrierend sein und Ihre Anwendung weniger zugänglich machen.

Wie man die Bildschirmausrichtung sperrt

Android

Sie können die Bildschirmausrichtung in Android sperren, indem Sie das `screenOrientation`-Attribut in der `AndroidManifest.xml`-Datei festlegen:

<activity
 android:name=".MyActivity"
 android:screenOrientation="landscape"
 ... >
</activity>

Sie können die Ausrichtung auch programmatisch sperren:

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

iOS

In iOS können Sie die unterstützten Ausrichtungen in der `Info.plist`-Datei angeben. Sie können auch die `supportedInterfaceOrientations`-Methode in Ihrem View Controller überschreiben:

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
 return .landscape
}

Globale Überlegungen

Beachten Sie beim Design für ein globales Publikum Folgendes bezüglich der Bildschirmausrichtung:

• Rechts-nach-Links (RTL) Layouts: Überlegen Sie, wie sich Ihre Benutzeroberfläche an RTL-Sprachen anpasst. Einige Sprachen wie Arabisch und Hebräisch werden von rechts nach links geschrieben. Stellen Sie sicher, dass Ihr Layout im RTL-Modus korrekt gespiegelt wird. Auto Layout und ConstraintLayout bieten oft integrierte Unterstützung für RTL-Layouts.
• Kulturelle Vorlieben: Achten Sie auf kulturelle Vorlieben in Bezug auf die Gerätenutzung. Während die meisten Benutzer an Hoch- und Querformatmodi gewöhnt sind, könnten einige Kulturen subtile Vorlieben haben. Tests mit Benutzern aus verschiedenen Regionen können wertvolle Einblicke liefern.
• Barrierefreiheit für vielfältige Benutzer: Priorisieren Sie immer die Barrierefreiheit. Stellen Sie sicher, dass Ihre Anwendung von Menschen mit Behinderungen unabhängig von der Bildschirmausrichtung nutzbar ist. Dazu gehört die Bereitstellung von Alternativtext für Bilder, die Gewährleistung eines ausreichenden Farbkontrasts und die Unterstützung von Hilfstechnologien.

Testen der Handhabung der Bildschirmausrichtung

Gründliche Tests sind unerlässlich, um sicherzustellen, dass Ihre Anwendung Änderungen der Bildschirmausrichtung korrekt handhabt. Hier sind einige Tipps zum Testen:

• Emulatoren und reale Geräte verwenden: Testen Sie Ihre Anwendung sowohl auf Emulatoren als auch auf realen Geräten, um eine größere Bandbreite an Bildschirmgrößen und Hardwarekonfigurationen abzudecken.
• In verschiedenen Ausrichtungen testen: Testen Sie Ihre Anwendung sowohl im Hoch- als auch im Querformat sowie im umgekehrten Hoch- und Querformat, falls unterstützt.
• Mit verschiedenen Bildschirmgrößen testen: Testen Sie Ihre Anwendung auf Geräten mit unterschiedlichen Bildschirmgrößen, um sicherzustellen, dass die Benutzeroberfläche korrekt skaliert.
• Mit verschiedenen Schriftgrößen testen: Testen Sie Ihre Anwendung mit unterschiedlichen Schriftgrößen, um sicherzustellen, dass der Text lesbar bleibt.
• Mit aktivierten Barrierefreiheitsfunktionen testen: Testen Sie Ihre Anwendung mit aktivierten Barrierefreiheitsfunktionen wie Bildschirmlesern, um sicherzustellen, dass sie für Benutzer mit Behinderungen zugänglich bleibt.
• Automatisiertes Testen: Implementieren Sie automatisierte UI-Tests, die Änderungen der Bildschirmausrichtung abdecken. Dies kann helfen, Regressionen zu erkennen und ein konsistentes Verhalten über Releases hinweg sicherzustellen.

Fazit

Die effektive Handhabung der Bildschirmausrichtung ist ein entscheidender Aspekt der Mobil- und Webentwicklung. Indem Sie die verschiedenen auf jeder Plattform verfügbaren Techniken verstehen und Best Practices befolgen, können Sie Anwendungen erstellen, die eine nahtlose und angenehme Benutzererfahrung bieten, unabhängig davon, wie der Benutzer sein Gerät hält. Denken Sie daran, Tests zu priorisieren und die globalen Auswirkungen Ihrer Designentscheidungen zu berücksichtigen, um sicherzustellen, dass Ihre Anwendung für ein vielfältiges Publikum zugänglich und benutzerfreundlich ist.